<template>
  <a-form
    :label-col="{ span: 1 }"
    :wrapper-col="{ span: 23 }"
    autocomplete="off"
    labelAlign="left"
  >
    <a-form-item label="楼盘名称">
      <a-input v-model:value="formValue.buildingName" />
    </a-form-item>
    <a-form-item label="开盘日期"
      ><a-date-picker
        v-model:value="formValue.openDate"
        valueFormat="YYYY-MM-DD"
      />
    </a-form-item>
    <a-form-item label="起始单价" extra="填写数字">
      <a-input v-model:value="formValue.averagePrice" />
    </a-form-item>
    <a-form-item label="价格描述">
      <a-input v-model:value="formValue.priceDesc" />
    </a-form-item>
    <a-form-item label="地址">
      <AreaSelector ref="areaSelector" />
    </a-form-item>
    <a-form-item label="详细地址">
      <a-textarea
        v-model:value="formValue.addr"
        placeholder="详细地址,如xxx街"
        :auto-size="{ minRows: 2, maxRows: 5 }"
      />
    </a-form-item>
    <a-form-item label="物业类别">
      <a-input v-model:value="formValue.estateType" />
    </a-form-item>
    <a-form-item label="项目特色">
      <a-textarea
        v-model:value="formValue.projectSpec"
        placeholder=""
        :auto-size="{ minRows: 2, maxRows: 5 }"
      />
    </a-form-item>
    <a-form-item label="建筑类别">
      <a-input v-model:value="formValue.buildingCategory" />
    </a-form-item>
    <a-form-item label="装修状况">
      <a-input v-model:value="formValue.fitupStatus" />
    </a-form-item>
    <a-form-item label="产权年限">
      <a-input v-model:value="formValue.propertyRights" />
    </a-form-item>
    <a-form-item label="开发商">
      <a-input v-model:value="formValue.developers" />
    </a-form-item>
    <a-form-item label="排序" extra="数值越大越靠前">
      <a-input v-model:value="formValue.orderNum" />
    </a-form-item>
  </a-form>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
  reactive,
  onMounted,
  onBeforeUnmount,
  defineEmits,
} from "vue";

import { copyObjVal } from "@/utils/common";

import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
dayjs.locale("zh-cn");

import AreaSelector from "@/components/area/threeAreaSelector/index.vue";

export default defineComponent({
  components: { AreaSelector },
  setup(props, context) {
    const areaSelector = ref();

    const formValue = ref({
      buildingName: "",
      openDate: null,
      averagePrice: "", //起始价
      addr: "",
      estateType: "", //物业类型
      projectSpec: "", //项目特色
      buildingCategory: "", //建筑类别
      fitupStatus: "", //装修状况
      propertyRights: "", //产权年限
      developers: "", //开发商
      orderNum: "0",
      provinceCode: "",
      provinceName: "",
      cityCode: "",
      cityName: "",
      countryCode: "",
      countryName: "",
    } as any);

    const getData = () => {
      let target = {};
      copyObjVal(formValue.value, target);
      let area = areaSelector.value.getData();
      formValue.value.provinceCode = area.province.code;
      formValue.value.provinceName = area.province.name;
      formValue.value.cityCode = area.city.code;
      formValue.value.cityName = area.city.name;
      formValue.value.countryCode = area.country.code;
      formValue.value.countryName = area.country.name;
      return target;
    };

    return {
      formValue,
      areaSelector,
      getData,
    };
  },
});
</script>
